<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no">-->
    <meta charset="UTF-8">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <title>地图示例</title>

    <!-- 样式设置 -->
    <link href="style/combined.css" rel="stylesheet">
    <link href="lib/dat.gui/dat.gui.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

    <script>
      function dropdownClick(e){
        console.log('131311', e)
      }
     
    </script>
</head>
<body style="overflow: hidden;" ng-cloak
      ng-controller="MainCtrl" md-theme="default">
<script>

    ;(function () {
        if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
        var src = '//cdn.jsdelivr.net/npm/eruda';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
        document.write('<scr' + 'ipt src="./lib/eruda/eruda-fps.js"></scr' + 'ipt>');
        document.write('<scr' + 'ipt src="./lib/eruda/eruda-memory.js"></scr' + 'ipt>');
        document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
        document.write('<scr' + 'ipt>eruda.add(erudaFps);;</scr' + 'ipt>');
        document.write('<scr' + 'ipt>eruda.add(erudaMemory);;</scr' + 'ipt>');
    })();

</script>

<div style="height: 100%" layout="column" class="page_container">

    <div class="navbar navbar-inverse" style="display: flex; align-items: center;">
        <md-checkbox ng-model="isTerrainActive" ng-click="toggleTerrainActive()">显示三维地形</md-checkbox>


        <!-- <div class="dropdown" style="display: inline-block; margin: 20px;">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              路线选择
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" onclick="dropdownClick()">
              <li><a href="#">长征</a></li>
              <li><a href="#">三国</a></li>
              <li><a href="#">春秋战国</a></li>
            </ul>
        </div> -->

        <button type="button" class="btn btn-primary" style="margin: 20px;">
          请选择事件名称
        </button>
        <select id="selectId" class="form-control" style="width: 500px;">
          <option>请选择</option>
          <option>益州之戰</option>
          <option>劉備入益州</option>
          <option>春秋战国</option>
        </select>

          <!-- Button trigger modal -->
        <button id="myModalId" type="button" class="btn btn-success" style="margin: 20px;" data-toggle="modal" data-target="#myModal" onclick="showStoryClick()">
            展示事件详情
        </button>
        <button id="resetRouteMapId" type="button" class="btn btn-warning" style="margin: 20px;" onclick="resetRouteMapClick()">
            展示事件路线图
        </button>
        
        <button id="removeMapId" type="button" class="btn btn-danger" style="margin: 20px;" onclick="removeMap()">
          清空地图
      </button>
        
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">瑞金</h4>
                </div>
                <div class="modal-body" id="myModalContent">
                    瑞金是一个红色与绿色并存的城市。瑞金是著名的红色故都、共和国摇篮、中央苏区时期党中央驻地、中华苏维埃共和国临时中央政府诞生地、中央红军二万五千里长征出发地之一、是全国爱国主义和革命传统教育基地；是中国红色旅游城市。2014年5月27日，瑞金市列入江西省直管县体制改革试点。2015年7月，经国家旅游局正式批复，瑞金共和国摇篮景区成为江西第七、赣州首个5A级旅游景区。2015年8月，国务院同意将瑞金市列为国家历史文化名城。 [3-4]  2018年7月29日，瑞金市正式脱贫摘帽，退出贫困市序列。 [5]  2018年12月，瑞金市喜获“2018年度中国十佳脱贫攻坚与精准扶贫示范县市”。 [6]  瑞金市是“无废城市”建设特例市。
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
            </div>
        </div>


    </div>

    <div flex layout="row" layout-align="start stretch" class="map_area">
        <!--<div class="side_bar" layout="column">-->
        <!--</div>-->
        <div class="map_content" flex>
            <div id="mapbox-container" class="mapbox-container"></div>
            <div id="console-log-div" class="console-log-div"></div>
        </div>
    </div>

</div>

<style>
  .dg.ac {
    right: 40px;
  }

  .cr.string input {
    height: 23px;
  }
</style>
<script src="lib/jquery-3.2.1.js"></script>
<script src="lib/inflate.min.js"></script>
<script src="lib/dat.gui/dat.gui.js"></script>
<!--<script src="lib/mapbox-gl-unminified.js"></script>-->
<script src="lib/mapbox-gl-unminified-2.0.0.js"></script>
<script data-main="main" src="lib/require.js"></script>

<!--<script src="lib/console-log-div.js"></script>-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>


<script>
  window.allMarkers = []
  window.allPolys = []
  window.the_interval = null

  var the_selected_storys = []
  axios.get('http://49.234.14.44:8088/sanguo/event').then(function (res) {
    console.log('axios', res)
    the_selected_storys = res.data
    let options = '<option>请选择事件名称</option>'
    for (let story of the_selected_storys) {
      options += `<option>${story.eventName}</option>`
    } 

    $("#selectId").html(options);
  }).catch(function (error) {
  });




  var the_selected_story_name='请选择事件名称'
  var the_selected_story_content=''
  $("select#selectId").change(function(){
    console.log($(this).val());//获取点击当前option的value值
    the_selected_story_name = $(this).val()
    if(the_selected_story_name == '请选择事件名称') {
      the_selected_story_content = ''
    }
    for(let item of the_selected_storys) {
      if(item.eventName == the_selected_story_name) {
        the_selected_story_content = item.info
      }
    }
  });


  function showStoryClick() {
    $("#myModalLabel").text(the_selected_story_name);
    $("#myModalContent").text(the_selected_story_content);
  }

  function resetRouteMapClick() {
    window.clearInterval(window.the_interval)

    if (the_selected_story_name == '请选择事件名称') {
      showStoryClick()
      $("#myModalId").click();
    }

    for (let marker of window.allMarkers) {
      marker.removeFromMap()
    }

    for (let poly of window.allPolys) {
      poly.removeFromMap()
    }


    axios.get(`http://49.234.14.44:8088/sanguo/event/loc/${the_selected_story_name}`).then(function (res) {
      console.log('event detail', res)
      window.eventDetail = res.data

      window.allMarkers = []
      window.allPolys = []
      window.drawRouteMap()
      
    }).catch(function (error) {
    });




    
  }

  function removeMap() {
    for (let marker of window.allMarkers) {
      marker.removeFromMap()
    }

    for (let poly of window.allPolys) {
      poly.removeFromMap()
    }

    window.clearInterval(window.the_interval)

  }
</script>


</body>
</html>